﻿@model IEnumerable<EC_ASS.Models.OrderDetailModel>

<div id="listDetailTable">
    <div class="alert alert-success" id="successMS">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        Cập nhật thành công !
    </div>
    <table class="table table-bordered">
        <thead>
            <th>Mã hàng</th>
            <th>Hình ảnh</th>
            <th>Số lượng</th>
            <th>Size</th>
            <th>Giá</th>
            <th></th>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <form action="@Url.Action("UpdateDetailOrderItem", "Admin")" method="post" class="updateDetailItemForm">
                    <tr class="warning">
                        <td>@item.Orders.ID<input type="hidden" value="@item.Orders.ID" name="id"/></td>
                        <td>
                            <img src="@Url.Content("~/" + item.DetailItem.Picture)" height="70" width="70"/></td>
                        <td>
                            <input type="text" name="quantity" value="@item.Orders.Quantity" class="span1"/></td>
                        <td>@item.Orders.Size</td>
                        <td>@item.Orders.Price</td>
                        <td>
                            <input type="submit" value="Sữa" class="btn updateButton"/>
                            @Html.ActionLink("Xóa", "DeleteDetailItem", "Admin", null, new { @class = "btn delete-detail-item", @itemID = item.Orders.ID, 
                                                                                                @itemSize = item.Orders.Size, @orderID = item.Orders.OrderID })
                        </td>
                    </tr>
                </form>
            }
        </tbody>
    </table>
</div>
<script>
    $(function () {
        $('#successMS').hide();
        $('.updateDetailItemForm').submit(function () {
            $.ajax({
                url: $(this).attr("action"),
                type: "POST",
                data: $(this).serialize(),
                success: function (data) {
                    $('#successMS').show();
                    $('#listDetailTable').fadeOut(1500, function () {
                        //fade in with new content
                        $("#listDetailTable").html(data);
                        $('#successMS').hide();
                        $("#listDetailTable").fadeIn(1500);
                    });
                }
            });
            return false;
        });
        $('.delete-detail-item').click(function () {
            $.ajax({
                url: this.href,
                type: "GET",
                data: {
                    id: $(this).attr("itemID"),
                    size: $(this).attr("itemSize"),
                    order: $(this).attr("orderID")
                },
                success: function (data) {
                    $('#successMS').show();
                    $('#listDetailTable').fadeOut(1500, function () {
                        //fade in with new content
                        $("#listDetailTable").html(data);
                        $('#successMS').hide();
                        $("#listDetailTable").fadeIn(1500);
                    });
                }
            });
            return false;
        });
    });
</script>


